<template>
  <a-card :bordered="false">
    <a-row>
      <a-col :span="24">
        <a-form-item label="方法调用测试">
          <a-button @click="deleteRecord">测试</a-button>
        </a-form-item>
      </a-col>
    </a-row>
    <vxe-grid
      id="UserList"
      ref="vxeTable"
      :height="null"
      v-bind="gridOptions"
      :row-config="{keyField:'id'}"
      v-on="listeners"
    >
      <template v-slot:toolbar_tools>
        <!-- <div >
          <a-button type="primary" icon="sync" ghost class="theme--perfect-button" @click="setAuth">添加权限</a-button>
          <a-button type="primary" icon="sync" ghost class="theme--perfect-button" @click="clearAuth">清空权限</a-button>
        </div> -->
      </template>
      <template #action="{ row }">
        <template>
          <a v-hasPermi="'AuthList:edit'" @click="handleEdit(row)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-hasPermi="'AuthList:add'">
                <a  @click="handleAdd(row)">新增</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(row)">详情</a>
              </a-menu-item>
              <a-menu-item v-hasPermi="'AuthList:delete'">
                <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(row.id)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </template>
      </template>
    </vxe-grid>
    <auth-modal ref="modalForm" @ok="modalFormOk" />
  </a-card>
</template>

<script>
import AuthModal from './modules/AuthModal'
import VxeTableListMixin from '@/mixins/VxeTableListMixin'
import storage from 'store'
import { PERMISSIONS } from '@/store/mutation-types'
export default {
  name: 'AuthList',
  components: {
    AuthModal
  },
  mixins: [VxeTableListMixin],
  data() {
    return {
      columns: [
        { type: 'checkbox', width: 40 },
        { type: 'seq', width: 40 },
        {
          title: '编码',
          field: 'dictCode',
          sortable: true
        },
        {
          title: '名称',
          field: 'dictName'
        },
        {
          title: '默认值',
          field: 'dictDefaultValue'
        },
        {
          title: '描述',
          field: 'dictDesc'
        },
        {
          title: '类别',
          field: 'dictType',
          slots: { default: ({ row }) => {
            return row.dictType === '1' ? '系统字典' : '业务字典'
          } }
        },
        {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          width: 170
        }
      ],
      url: {
        list: '/sys/dict/tree/page',
        delete: '',
        deleteBatch: ''
      },
      toolbarConfig: {
        slots: {
          tools: 'toolbar_tools'
        }
      },
      auth: {
        permi: {
          add: 'AuthList:add',
          edit: 'AuthList:edit',
          table: 'AuthList:table'
        }
      }
    }
  },
  auth: { // 权限校验注入设置
    deleteRecord: 'delete' // key为需要注入权限校验的方法名，这里为 deleteRecord 方法；值为需要校验的操作权限，这里为 delete 操作权限
  },
  methods: {
    deleteRecord() {
      console.log('有执行权限')
    },
    setAuth() {
      const permi = JSON.parse(storage.get(PERMISSIONS))
      if (permi.indexOf('AuthList:add') < 0) {
        permi.push('AuthList:add')
        storage.set(PERMISSIONS, JSON.stringify(permi))
        console.log('请刷新页面')
        // window.location.reload()
      }
    },
    clearAuth() {
      const permi = JSON.parse(storage.get(PERMISSIONS))
      const index = permi.indexOf('AuthList:add')
      if (index >= 0) {
        permi.splice(index, 1)
        storage.set(PERMISSIONS, JSON.stringify(permi))
        console.log('请刷新页面')
        // window.location.reload()
      }
    }
  },
  mounted() {
    // this.initAuth()
  }
}
</script>

